<template>
  <div>
    <div>
      <el-card style="height: 90vh;">
        <!-- 公告顶部横向导航 -->
        <div class="title" style="display: flex;">
          <div @click="toToggle(item)" :class="{ active: item.id === activeItemId }" v-for="item in category"
            :key="item.id" style="margin-right: 20px; cursor: pointer;">
            {{ item.name }}
            <el-divider direction="vertical"></el-divider>
          </div>
        </div>
        <el-divider content-position="right"></el-divider>
        <!-- 公告内容 -->
        <el-card>
          <div style="font-size: 18px; font-weight: bold; margin-left: 20px;">
            标题
          </div>
          <el-divider content-position="right"></el-divider>
          <div v-for='item in categoryArticle' ::key="item.id">
            <div style="display: flex; justify-content: space-between ;">
              <div class="con_left" @click="toSee(item)">{{ item.title }}</div>
              <div class="con_right">{{ item.publish_time | fmtDate }}</div>
            </div>
            <el-divider content-position="right"></el-divider>
          </div>
        </el-card>
      </el-card>
    </div>
  </div>
</template>
<script>
import { get, post } from '@/utils/request'

export default {
  data() {
    return {
      // 默认点击公告导航栏的id 用于添加样式
      activeItemId: 1,
      // 公告栏点击详情后的请求页面发送请求传递的参数
      params: {
        page: 1,
        pageSize: 3,
        id: this.activeItemId //这是栏目id，或许对应栏目需要传的所传的参数
      },
      // 接收导航栏
      category: [],
      // 对应导航栏的数组
      categoryArticle: [],
    }
  },
  methods: {
    // 去查看详情
    toSee(item) {
      //  跳转到主页
      this.$router.push({
        path: "/detail/index",
        query: { ...item }
      })
    },
    // 获取公告导航栏栏目
    async getCategory() {
      let res = await get('/category/findAll')
      // console.log(res);
      this.category = res.data
    },
    async toToggle(item) {
      this.activeItemId = item.id;
      this.params.id = item.id
      console.log(this.params);
      let res = await get('/category/pageQuery', this.params)
      console.log(res.data);
      this.categoryArticle = res.data.articles
      console.log(this.categoryArticle);
    }
  },
  async created() {
    await this.getCategory();
    if (this.category.length > 0) {
      this.toToggle(this.category[0]);
    }
  },
}
</script>

<style>
.active {
  color: #3e36e0;
}
</style>